<template>
  <div class="app_content">
    <el-card>
      <el-table :data="tableData" style="width: 100%" border>
        <el-table-column prop="zwh_id" label="ID" width="50">
        </el-table-column>
        <el-table-column prop="zwh_name" label="姓名">
        </el-table-column>
        <el-table-column prop="zwh_title" label="留言内容" width="240">
        </el-table-column>
        <el-table-column prop="time" label="留言时间">
        </el-table-column>
        <el-table-column label="操作">
          <template #default="scope">
            <el-button size="mini" type="paramry" @click="handleCheck(scope.row)">查看</el-button>
            <el-button size="mini" type="danger" @click="handleDelte(scope.row.zwh_id,currentPage)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination @current-change="changePage" style="text-align:center;margin:38px 0 0px;" background layout="prev, pager, next" page-size="5" :total="totalPage">
      </el-pagination>
    </el-card>
  </div>
</template>

<script>
import { reactive, toRefs, getCurrentInstance, onMounted } from 'vue'
import { MsgGet, MsgDel } from '@/api/index.js'
export default {
  setup() {
    const { proxy } = getCurrentInstance()
    const state = reactive({
      tableData: [],
      totalPage: 0,
      currentPage:1
    })

    const getMsgs = (page) => {
      MsgGet(page, 5).then((res) => {
        if (res.code == 200) {
          state.tableData = res.data
          state.totalPage = Number(res.msg)
        }
      })
    }

    const changePage = (e) => {
      state.currentPage = e
      getMsgs(e)
    }

    const handleCheck = (obg) => {
      console.log(obg)
      proxy.$router.push('/check')
      proxy.storage.setLocal('msgStorage',obg)
    }

    const handleDelte = (id,currentPage) => {
      proxy
        .$confirm('是否删除该条留言?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
        })
        .then(() => {
          MsgDel({
            id,
          }).then((res) => {
            if (res.code == 200) {
              getMsgs(currentPage)
              proxy.$message({
                type: 'success',
                message: '删除成功!',
              })
            } else {
              proxy.$message.error(res.msg)
            }
          })
        })
        .catch(() => {
          proxy.$message({
            type: 'info',
            message: '已取消删除',
          })
        })
    }

    onMounted(() => {
      getMsgs(1)
    })

    return {
      ...toRefs(state),
      handleDelte,
      changePage,
      handleCheck
    }
  },
}
</script>

<style>
</style>